<template>
	<UploadImages ref="upload-images" :max-count="maxCount" :width="width" :height="height" custom-btn
		:file-list="fileList" :auto-upload="autoUpload" :show-progress="false" :show-add="showAdd"
		:isNativeHead="isNativeHead" :show-upload-list="showUploadList" :sourceType="sourceType"
		@openSource="openSource" @on-list-change="handleListChange" @on-choose-fail="onChooseFail">
		<view slot="addBtn">
			<view v-if="$slots.addBtn" class="slot-view" hover-class="slot-btn__hover">
				<slot name="addBtn" />
			</view>
			<view v-else class="slot-btn" hover-class="slot-btn__hover" :style="slotStyle" hover-stay-time="150">
				<u-icon name="plus" :size="addSize" color="#D8D8D8"></u-icon>
			</view>
			<BottomChoose ref="bottom-choose" @change="sourceTypeChange" />
		</view>
		<PopInput title="提醒" type="text" sureText="前往设置" cancelText="返回" :showCancel="true" :content="uploadConent"
			:visible.sync="showConfirm" @cancel="handleCancel" @click="handleConfirm" />
	</UploadImages>
</template>

<script>
	import PopInput from '@/components/pop-input-view';
	import BottomChoose from '@/components/bottom-choose'
	import UploadImages from '@/components/upload/u-upload';
	import permision from '@/js_sdk/wa-permission/permission.js';
	import {
		mapGetters
	} from 'vuex';

	export default {
		components: {
			UploadImages,
			PopInput,
			BottomChoose
		},
		props: {
			// 给fileList赋初始值用
			list: {
				type: Array,
				default () {
					return [];
				}
			},
			// 最大上传数量
			maxCount: {
				type: [String, Number],
				default: 9
			},
			// 是否自动上传
			autoUpload: {
				type: Boolean,
				default: false
			},
			// 内部预览图片区域和选择图片按钮的区域宽度
			width: {
				type: [String, Number],
				default: 160
			},
			// 内部预览图片区域和选择图片按钮的区域高度
			height: {
				type: [String, Number],
				default: 160
			},
			addSize: {
				type: [String, Number],
				default: 48
			},
			uploading: {
				type: Boolean,
				default: false
			},
			showAdd: {
				type: Boolean,
				default: true
			},
			isNativeHead: {
				type: Boolean,
				default: true
			}
		},
		data() {
			return {
				fileList: [],
				qiniuToken: '',
				showUploadList: false,
				uploadConent: '需要使用相机权限,请前往设置。',
				showConfirm: false,
				sourceType: ['album', 'camera']
			};
		},
		computed: {
			...mapGetters(['platform', 'isIOS']),
			
			slotStyle() {
				return ` width:${this.width}rpx;height:${this.height}rpx;`;
			}
		},
		methods: {
			openSource() {
				this.$refs['bottom-choose'].open()
			},
			sourceTypeChange(source) {
				this.sourceType = [source]
				this.$nextTick(()=>{					this.$refs['upload-images'].appStratChoose(this.sourceType)				})
			},
			handleListChange(lists, name) {
				if (!lists || !lists.length) {
					return false;
				}
				this.$emit('update:uploading', true);
				this.$emit('on-list-change', lists);
				this.$refs['upload-images'].clear();
			},
			selectFile() {
				// 触发选择图片；不能改文件名，外部要调
				this.$refs['upload-images'].selectFile();
			},
			onChooseFail(error) {
				console.log("onChooseFail:", error);
				this.$emit('on-choose-fail');
			},
			handleConfirm() {
				permision.gotoAppPermissionSetting();
			},
			handleCancel() {}
		}
	};
</script>

<style lang="scss" scoped>
	/deep/.u-add-tips {
		height: 0 !important;
		margin-top: 0 !important;
		overflow: hidden;
	}

	.slot-btn {
		width: 160rpx;
		height: 160rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #f6f7fa;
		border-radius: 10rpx;
		// margin: 10rpx;
	}

	.slot-btn__hover {
		background-color: rgb(235, 236, 238);
	}
</style>